---
import { getCollection } from "astro:content";
import MainLayout from "../../layouts/MainLayout.astro";
import { format } from "date-fns";
import FontAwesomeIcon from "../../components/FontAwesomeIcon.astro";
import {
  faCalendar,
  faChevronLeft,
  faChevronRight,
  faExternalLink,
  faUser
} from "@fortawesome/free-solid-svg-icons";
import blogMissing from "../../assets/blog-missing.png";
import { Image } from "astro:assets";

// prettier-ignore
export async function getStaticPaths() {
  const posts = await getCollection("blog");
  const sortedPosts = posts.sort((a, b) => {
    if (a.data.date === undefined || b.data.date === undefined) {
      return 0;
    }
    if (a.data.date < b.data.date) {
      return 1;
    } else if (a.data.date > b.data.date) {
      return -1;
    } else {
      return 0;
    }
  });
  const pages = [];
  while (sortedPosts.length > 0) {
    pages.push(sortedPosts.splice(0, pages.length == 0 ? 7 : 6));
  }
  return pages.map((page, index) => ({
    params: { page: index == 0 ? undefined : (index + 1).toString() },
    props: { page: {
      data: page,
      currentPage: index + 1,
      lastPage: pages.length
    } }
  }));
}

const { currentPage, data, lastPage } = Astro.props.page;

let begPage = currentPage - 2;
let endPage = currentPage + 2;
if (endPage > lastPage) {
  begPage -= endPage - lastPage;
  endPage = lastPage;
}
if (begPage < 1) {
  endPage += 1 - begPage;
  begPage = 1;
}
---

<MainLayout
  title="Blog"
  description="Welcome to the Ferron Blog! Stay tuned for the latest Ferron updates."
>
  <main
    id="blog"
    class="max-w-screen-xl mx-auto !px-4 py-6 md:py-28 flex items-center justify-center flex-col"
  >
    <h1 class="text-4xl md:text-6xl pb-1 md:pb-2 font-bold">Ferron Blog</h1>
    <p
      class="max-w-xl text-center text-muted-foreground flex items-center justify-center mt-2 mb-6 md:mb-8 md:text-lg"
    >
      Stay tuned for the latest Ferron updates.
    </p>
    <section
      class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto"
    >
      {
        data.map((post, index) => {
          const truncatedDescription =
            post.data.description === undefined
              ? ""
              : post.data.description.length > 300
                ? post.data.description.substring(0, 300) + "..."
                : post.data.description;

          return (
            <div
              class={`card card-hover p-0 group border h-full flex flex-col ${currentPage === 1 && index === 0 ? "md:col-span-2 lg:col-span-3" : ""}`}
            >
              <a
                href={`/blog/${post.id}`}
                class={`flex flex-col ${currentPage === 1 && index === 0 ? "md:flex-row" : ""} grow`}
              >
                <div
                  class={`relative overflow-hidden rounded-t-lg md:aspect-5/3 ${currentPage === 1 && index === 0 ? "md:w-1/2 lg:w-7/12 md:rounded-none md:rounded-l-lg md:grow" : ""}`}
                >
                  <Image
                    src={post.data.cover || blogMissing}
                    alt={post.data.title || null}
                    width={750}
                    height={450}
                    class={`object-cover w-full h-full`}
                  />
                </div>
                <div
                  class={`grow flex flex-col p-4 ${currentPage === 1 && index === 0 ? "md:w-1/2 lg:w-5/12" : ""}`}
                >
                  <div class="flex flex-row items-center justify-between mb-2 py-2">
                    <h2
                      class={`text-2xl ${currentPage === 1 && index === 0 ? "md:text-3xl lg:text-4xl" : ""} font-bold leading-tight"`}
                    >
                      {post.data.title}
                    </h2>
                    <div class="text-sm text-muted-foreground opacity-0 group-hover:opacity-100 duration-300">
                      <FontAwesomeIcon icon={faExternalLink} />
                    </div>
                  </div>
                  <p
                    class={`text-sm ${currentPage === 1 && index === 0 ? "md:text-base" : ""} text-muted-foreground grow`}
                  >
                    {truncatedDescription}
                  </p>
                  <p
                    class={`text-xs ${currentPage === 1 && index === 0 ? "md:text-sm" : ""} text-muted-foreground mt-2 flex flex-wrap gap-2`}
                  >
                    {post.data.date !== undefined ? (
                      <span class="whitespace-nowrap">
                        <FontAwesomeIcon
                          icon={faCalendar}
                          class="w-4 !h-4 me-0.5 inline-block align-middle"
                        />
                        <span class="align-middle">
                          <span class="sr-only">Published on: </span>
                          <time>
                            {format(new Date(post.data.date), "MMMM d, yyyy")}
                          </time>
                        </span>
                      </span>
                    ) : null}
                    {post.data.author !== undefined ? (
                      <span class="whitespace-nowrap">
                        <FontAwesomeIcon
                          icon={faUser}
                          class="w-4 !h-4 me-0.5 inline-block align-middle"
                        />
                        <span class="align-middle">
                          <span class="sr-only">Author: </span>
                          {post.data.author}
                        </span>
                      </span>
                    ) : null}
                  </p>
                </div>
              </a>
            </div>
          );
        })
      }
    </section>
    {
      (
        <div class="flex-center mt-12">
          {lastPage > 1 && (
            <nav class="mx-auto flex w-full justify-center">
              <ul class="flex flex-row items-center gap-1">
                {currentPage > 1 && (
                  <li>
                    <a
                      class="btn p-0 h-10 w-10 shadow-none"
                      href={
                        currentPage - 1 == 1
                          ? "/blog"
                          : `/blog/${currentPage - 1}`
                      }
                    >
                      <FontAwesomeIcon icon={faChevronLeft} />
                    </a>
                  </li>
                )}
                {Array.from({ length: lastPage > 5 ? 5 : lastPage }).map(
                  (_, i) => (
                    <li>
                      <a
                        class={`btn p-0 h-10 w-10 shadow-none ${currentPage === begPage + i ? "btn-primary" : ""}`}
                        href={
                          begPage + i == 1 ? "/blog" : `/blog/${begPage + i}`
                        }
                      >
                        {begPage + i}
                      </a>
                    </li>
                  )
                )}
                {currentPage < lastPage && (
                  <li>
                    <a
                      class="btn p-0 h-10 w-10 shadow-none"
                      href={
                        currentPage + 1 == 1
                          ? "/blog"
                          : `/blog/${currentPage + 1}`
                      }
                    >
                      <FontAwesomeIcon icon={faChevronRight} />
                    </a>
                  </li>
                )}
              </ul>
            </nav>
          )}
        </div>
      )
    }
  </main>
</MainLayout>
